<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title> 3n + 1 Game </title>
	<link rel="stylesheet" href="./machine_plus.css">
</head>

<body>
	<p><span id="cbs">显示</span>队列前的零<input id="cbz" type="checkbox" checked /></p>
	<p>输入借位&nbsp;十进制: <input type="number" id="ipr" value="0" />&nbsp;二进制：<input id="tpr" type="text" value="0" /></p>
	<p>输入数字&nbsp;十进制: <input type="number" id="ipt" value="1" />&nbsp;三进制：<input id="tpt" type="text" value="1" /></p>
	<!-- Maybe I can make it more beautiful, but I just want keep it simple. -->
	<div id="sticker">
		<p id="cls">X</p>
		<p id="currLoc"></p>
		<p id="rowCnt"></p>
		<p id="hexStr"></p>
	</div>
	<table>
		<tbody id="insertRow"></tbody>
	</table>
	<script type="text/javascript" src="./machine_plus.js"></script>
	<script>
		'use strict';

		const insertRow = document.querySelector('#insertRow');
		const sticker = document.querySelector('#sticker');
		const rowCnt = document.querySelector('#rowCnt');
		const hexStr = document.querySelector('#hexStr');
		const currLoc = document.querySelector('#currLoc');
		const ipt = document.querySelector('#ipt');
		const ipr = document.querySelector('#ipr');
		const tpt = document.querySelector('#tpt');
		const tpr = document.querySelector('#tpr');
		const cls = document.querySelector('#cls');
		const cbz = document.querySelector('#cbz');
		const cbs = document.querySelector('#cbs');

		// Show Step In Web
		function showSteps(flag) {

			insertRow.textContent = '';
			let bit, num;
			if (flag) {

				bit = parseInt(ipr.value, 10).toString(2);
				num = parseInt(ipt.value, 10).toString(3);

				tpr.value = bit;
				tpt.value = num;
			} else {
				bit = tpr.value;
				num = tpt.value;

				ipr.value = parseInt(tpr.value, 2);
				ipt.value = parseInt(tpt.value, 3);
			}

			// initial track;
			robots = Array.from(bit).map(e => +e);
			track = Array.from(num).map(e => +e);

			if (robots.some(e => e > 1) || track.some(e => e > 2)) {
				alert('错误的输入');
				return null;
			}

			let cnt = 0, width = 0;

			while (robots.some(e => !!e) || track.some((e, i, t) => i <= t.length - 2 && !!e)) {

				// debugger;

				let tr = document.createElement("tr");

				let td2 = document.createElement("td");
				td2.innerHTML = '<tt>' + robots.map(e => ROBOT_SIGN[e]).join('')
					+ '</tt><tt>' + track.map(e => TRACK_SIGN[e]).join('') + '</tt>';

				tr.appendChild(td2);
				insertRow.appendChild(tr);

				trip();

				cnt++;
				width = Math.max(track.length, width);

				if (cnt > 10000) {
					alert('Got it!')
					break;
				}
			}

			rowCnt.textContent = `total ${cnt} rows, ${width} width`;

		}

		// add Event Listener
		(() => {
			ipr.addEventListener('change', () => {
				showSteps(1);
			}, false);
			ipt.addEventListener('change', () => {
				showSteps(1);
			}, false);
			tpr.addEventListener('change', () => {
				showSteps(0);
			}, false);
			tpt.addEventListener('change', () => {
				showSteps(0);
			}, false);
			cls.addEventListener('click', () => {
				sticker.style.visibility = 'hidden';
			}, false);
			cbz.addEventListener('change', () => {
				fillZero = cbz.checked;
				cbs.textContent = cbz.checked ? '显示' : '清除';
				showSteps();
			}, false);

			insertRow.addEventListener('click', evt => {
				let target = evt.target, rowIndex = 0;
				switch (target.nodeName) {
					case 'TT':
						rowIndex = target.parentElement.parentElement.rowIndex;
						break;
					case 'TD':
						rowIndex = target.parentElement.rowIndex;
						break;
					case 'TR':
						rowIndex = target.rowIndex;
						break;
					default:
						break;
				}
				// console.log('row : %d , char : %d ',rowIndex, Math.ceil(evt.offsetX / 15));
				currLoc.textContent = `row : ${rowIndex}, col : ${Math.ceil(evt.offsetX / 15)}`;
				sticker.style.visibility = 'visible';

				let [rs,ts] = Array.from(insertRow.rows[rowIndex].cells[0].children).map(e=>e.textContent);
				let [rv,tv] = [Object.values(ROBOT_SIGN),Object.values(TRACK_SIGN)];
				let hex = '';
				for (let i = 0; i < Math.max(rs.length,ts.length); i++) {
					hex += (3 * (rs[i]? parseInt(rv.indexOf(rs[i])) : 0) + (ts[i]? parseInt(tv.indexOf(ts[i])) : 0))
				}
				hexStr.textContent = hex.toString();
			});

			window.onmessage = function (evn) {
				console.log(evn.data);
			};
		})();
	</script>

</body>

</html>